<template>
  <div class="idlist-box">
      <TitleHeader name="账号列表"></TitleHeader>
      <el-table ref="multipleTable" :data="list" tooltip-effect="dark" style="width: 100%"  @selection-change="handleSelectionChange" :clearSelection="clearSelection">
        <el-table-column type="selection" width="70" > </el-table-column>
        <el-table-column prop="account" label="账号" >
        </el-table-column>
        <el-table-column prop="userGroup" label="用户组" >
        </el-table-column>
        <el-table-column prop="ctime" label="创建时间"  show-overflow-tooltip>
          <template slot-scope="scope">{{ (scope.row.ctime) }}</template>
        </el-table-column>
        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <el-button size="mini" @click="compile(scope.row.id)" >编辑</el-button>
            <el-button size="mini" type="danger" @click="deleuser(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    <div class="block idlist-page">
         <el-pagination
         @size-change="handleSizeChange"
        :current-page="currentPage"
        :page-sizes="pagesizeset"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total" 
        @current-change="page">
      </el-pagination>
      
    </div>
    <div class="idlist-btn">
      <el-button type="danger" @click="batchdele">批量删除</el-button>
      <el-button type="primary" @click="toggleSelection()">选择取消</el-button>
    </div>
    <!-- 编辑模态框 -->
    <div class="idlist-mask" v-show="show">
      <p>修改用户</p>
      <p><span>账号</span><el-input class="mask-input" v-model="newacc" placeholder="请输入内容" style="width:300px"></el-input></p>
      <p>用户组<el-select class="mask-input" v-model="val" placeholder="请选择" style="width: 300px">
        <el-option v-for="(item,index) in options" :key="index" :label="item.label" :value="item.value"></el-option></el-select>
      </p>
      <p class="addid-btn"><el-button type="primary" @click="amend" >修改</el-button><el-button @click="show=false">取消</el-button></p>

    </div>
    
  </div>
</template>

<script>
import TitleHeader from '@/components/TitleHeader';
import { userlist,usedele,batchdel,amenduser } from "@/apis/user";
import { TimeTransition } from "@/utils/utils";

export default {
  data() {
    return {
      list:[],
      checked: "",
      total:0,
      currentPage: 1,
      pagesize:5,
      pagesizeset:[5, 7],
      ctime:0,
      multipleSelection:[],
      clearSelection:'',
      options: [
        {
          value: "超级管理员",
          label: "超级管理员",
        },
        {
          value: "普通管理员",
          label: "普通管理员",
        }
      ],
      val: "普通管理员",
      account: "",
      show:false,
      checkeduser:[],
      newacc:'',
      id:'',
    };
  },
  methods: {
   
    
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
     let newarr= val.map((v)=> v.id)
      this.multipleSelection = JSON.stringify(newarr);
    },
    page(i){
      this.currentPage=i
      this.padgeing()
    },
    handleSizeChange(i){
      this.pagesize=i;
      this.padgeing()
    },
    padgeing(){
      userlist({currentPage:this.currentPage,pageSize:this.pagesize}).then((res)=>{
      if(res.data.total!=0){
        this.list=res.data.data;
        this.total=res.data.total;
       TimeTransition()
      }
      for (let i of this.list) {
       i.ctime=TimeTransition(i.ctime)
      }
     })
    },
    deleuser(id){
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           usedele({id:id}).then(res=>{
        if(res.data.code==0){
          this.$message({
          message: '臭臭世界系统提示:删除成功!',
          center: true,
          type:'success'
           });
           this.padgeing()
        }
      })
        }).catch(() => {
          this.$message({
          message: '臭臭世界系统提示:取消成功!',
          center: true,
          type:'success'
           });         
          });
     
//       account: "wangmazi"
// ctime: "2021-04-16T05:45:55.000Z"
// id: 78
// imgUrl: "default.jpg"
// userGroup: "超级管理员"
    },
    batchdele(){
       this.$confirm('此操作将永久批量删除用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           batchdel({ids:this.multipleSelection}).then(res=>{
          if(res.data.code==0){
          this.$message({
          message: '臭臭世界系统提示:批量删除成功!',
          center: true,
          type:'success'
           });
           this.padgeing()
        }
      })
        }).catch(() => {
          this.$message({
          message: '臭臭世界系统提示:取消成功!',
          center: true,
          type:'success'
           });         
          });
    },
    compile(id){
      this.show=true;
      this.checkeduser=this.list.filter(v=>{
       return v.id==id?v:''
      })
      this.id=id;
      this.newacc=this.checkeduser[0].account;
      this.val=this.checkeduser[0].userGroup;
      

    },
    amend(){
       this.$confirm('此操作将永久修改该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           amenduser({id:this.id,account:this.newacc,userGroup:this.val}).then(res=>{
        if(res.data.code==0){
          this.$message({
          message: '臭臭世界系统提示:修改成功!',
          center: true,
          type:'success'
           });
           this.padgeing()
           this.show=false;
        }
      })
        }).catch(() => {
          this.$message({
          message: '臭臭世界系统提示:取消成功!',
          center: true,
          type:'success'
           });         
          });
    }
  },
  components:{
    TitleHeader,
  },
  created(){
    this.padgeing()
  }
};
</script>

<style lang="less" scoped>
.idlist-page {
  padding: 20px;
  padding-bottom: 0;
}
.idlist-mask{
  width: 400px;
  height: 300px;
  position: fixed;
  background: #fff;
  top: 50%;
  left: 50%;
  margin-left: -200px;
  margin-top: -150px;
  border-radius: 5px;
  box-shadow: 1px 1px 4px 2px #ccc;

}
.mask-input{
  margin-left: 10px;
 
}
p{
  text-align: center;
   margin-top: 20px;
   span{
     margin-left: 16px;
   }
}

.idlist-btn {
  padding: 20px;
}
</style>